<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas表格背景</title>
    <style>
      html,
      body,
      .container{
        height: 100%;
        width: 100%;
       }
       .container{
       display: flex;
       justify-content: center;
       align-items: center;
       }
        canvas{
            border: 1px solid rgb(19, 18, 18);
        }
       
    </style>
    <script></script>
</head>
<body>

    <div class="container">
    <canvas id="demo2" width="400px" height="400px"></canvas>
    </div>
    <script  type="text/javascript">
    //获取元素dom
    let demo2=document.querySelector('#demo2')
    //指定画布是2d形式
    let ctx= demo2.getContext('2d')
    //创建网格线
    drawGrid=(ctx,stepX, stepY, color, lineWidth)=>{
    // // 设置绘制颜色
       ctx.strokeStyle = color;
       // 创建垂直格网线路径
       for(let i = stepX; i < demo2.width; i += stepX){
         // 设置绘制线段的宽度
       ctx.lineWidth = lineWidth;
       //开启路径
       ctx.beginPath()
       
       //笔触的位置-moveTo经常是画一些不连续的线
       ctx.moveTo(i, 0);
       //绘制一条从当前位置到指定x以及y位置的直线。
        ctx.lineTo(i,demo2.height);
       ctx.stroke()
       }
       // 创建水平格网线路径
       for(let j = stepY; j < demo2.height; j += stepY){
           // 设置绘制线段的宽度
       ctx.lineWidth = lineWidth;
           //开启路径
           ctx.beginPath()
           ctx.moveTo(0, j);
           ctx.lineTo(demo2.width, j);
           ctx.stroke()
       }
   }
    //ctx指定画布,stepX是线与线x间距 stepY是线与线y间距 color是线的颜色 lineWidth是线的宽度
  
     //调用封装好的表格工具
     drawGrid(ctx,20, 20, '#ccc', 0.5);
    //找到画布的中心点
    ctx.translate(200,200)
    </script>
</body>
</html>